<!-- eslint-disable vue/html-self-closing -->
<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-form
        :inline="true"
        :model="pageQuery"
      >
        <el-form-item label="手机号码">
          <el-input
            v-model="pageQuery.tel"
            placeholder="请输入手机号码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="init"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="pageQuery"
      >
        <el-form-item label="排序">
          <el-radio-group
            v-model="radio"
            @change="handleSortChange"
          >
            <el-radio-button
              label="创建时间"
              value="1"
            />
            <el-radio-button
              label="积分升序"
              value="2"
            />
            <el-radio-button
              label="积分降序"
              value="3"
            />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="openMultiMessageDialog"
      >
        批量发送站内信
      </el-button>
    </el-card>
    <el-card>
      <el-table
        v-loading="pageLoading"
        :data="pageVO.list"
        style="width: 100%"
      >
        <el-table-column
          label="头像"
          prop="pic"
        >
          <template #default="scope">
            <img
              v-if="scope.row.pic"
              :src="
                scope.row.pic.indexOf('http') === -1
                  ? resourcesUrl + scope.row.pic
                  : scope.row.pic
              "
              style="width: 50px; height: 50px"
            />
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="昵称"
        />
        <el-table-column
          prop="point"
          label="积分"
        />
        <el-table-column
          prop="tel"
          label="手机号码"
        />
        <el-table-column
          prop="createTime"
          label="注册时间"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template #default="scope">
            <div style="display: flex; flex-direction: column">
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  messageDialogVisible = true;
                  message.userId = scope.row.userId;
                "
              >
                发送站内信
              </el-button>
              <el-button
                link
                type="primary"
                size="small"
                @click="
                  pointDialogVisible = true;
                  point.userId = scope.row.userId;
                "
              >
                奖励/扣除积分
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="page-number">
      <el-pagination
        v-show="pageVO.total > 0"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="pageQuery.pageNum"
        :page-size="pageQuery.pageSize"
        :total="pageVO.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
    <el-dialog
      v-model="messageDialogVisible"
      width="500"
    >
      <template #header>
        <div
          style="
            color: #74512D;
            "
        >
          发送站内信
        </div>
      </template>
      <el-form>
        <el-form-item>
          <span>标题</span>
          <el-input
            v-model="message.title"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item>
          <span>内容</span>
          <el-input
            v-model="message.content"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="sendMessage"
          >
            确认
          </el-button>
          <el-button
            @click="messageDialogVisible = false"
          >
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="pointDialogVisible"
      title="奖励/扣除积分"
      width="500"
    >
      <el-form>
        <el-form-item>
          <span>积分</span>
          <el-input
            v-model="point.num"
            type="number"
            placeholder="请输入积分值"
          />
        </el-form-item>
        <el-form-item>
          <span>原因</span>
          <el-input
            v-model="point.reason"
            type="textarea"
            placeholder="请输入积分变化原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pointDialogVisible = false">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="sendPoint"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="multiMessageDialogVisible"
      title="批量发送站内信"
      width="750"
    >
      <div style="display: flex; flex-direction: column">
        <el-transfer
          v-model="selectedUserIds"
          style="text-align: center; display: inline-block"
          filterable
          :titles="['用户列表', '选中用户']"
          :button-texts="['BIU回来', 'BIU过去']"
          :data="userList"
        >
        </el-transfer>
        <el-form style="margin-top: 10px">
          <el-form-item label="标题">
            <el-input
              v-model="message.title"
              placeholder="请输入标题"
            />
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              v-model="message.content"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="multiMessageDialogVisible = false">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="handleMultiMessageConfirm"
          >
            发送
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as api from '@/api/user/user'
const Data = reactive({
  resourcesUrl: import.meta.env.VITE_APP_RESOURCES_URL,
  // 查询的参数
  pageQuery: {
    pageSize: 10,
    pageNum: 1,
    tel: ''
  },
  // 返回参数
  pageVO: {
    list: [], // 返回的列表
    total: 0, // 一共多少条数据
    pages: 0 // 一共多少页
  },
  // 站内信
  message: {
    userId: '',
    title: '',
    content: '',
    linkUrl: ''
  },
  // 积分变化
  point: {
    userId: '',
    num: '',
    reason: ''
  },
  // loading
  pageLoading: true,
  prodDetailsVisible: false,
  messageDialogVisible: false,
  pointDialogVisible: false,
  selectedUserIds: [],
  multiMessageDialogVisible: false,
  userList: [
    { key: 1, label: '选项1' },
    { key: 2, label: '选项2' },
    { key: 3, label: '选项3' }
  ],
  radio: 3
})
const {
  resourcesUrl,
  pageQuery,
  pageVO,
  pageLoading,
  point,
  pointDialogVisible,
  messageDialogVisible,
  message,
  selectedUserIds,
  multiMessageDialogVisible,
  userList,
  radio
} = toRefs(Data)

function init () {
  Data.pageLoading = true
  api
    .page({
      ...Data.pageQuery
    })
    .then((res) => {
      Data.pageVO = res
      Data.pageLoading = false
    })
    .catch((err) => {
      ElMessage.error(err)
      Data.pageLoading = false
    })
}
// 发送站内信
function sendMessage () {
  api
    .sendMessage(Data.message)
    .then((res) => {
      ElMessage.success('发送成功')
      messageDialogVisible.value = false
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
// 奖励/扣除积分
function sendPoint () {
  api
    .sendPoint(Data.point)
    .then((res) => {
      ElMessage.success('变动成功')
      pointDialogVisible.value = false
      init()
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
// 批量发送站内信对话框开启
function openMultiMessageDialog () {
  Data.multiMessageDialogVisible = true
  listAllUser()
}
// 获取所有用户
function listAllUser () {
  api
    .listAll()
    .then((res) => {
      // console.log(res)
      Data.userList = res.map((item) => {
        return {
          key: item.userId,
          label: item.tel
        }
      })
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
// 批量发送站内信
function handleMultiMessageConfirm () {
  const messages = Data.selectedUserIds.map((userId) => ({
    userId,
    title: Data.message.title,
    content: Data.message.content,
    linkUrl: Data.message.linkUrl
  }))
  api
    .sendMessages(messages)
    .then((res) => {
      ElMessage.success('发送成功')
      messageDialogVisible.value = false
      Data.multiMessageDialogVisible = false
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
function handleSortChange (val) {
  if (val == '1') {
    Data.pageQuery.columns = ''
    Data.pageQuery.orders = ''
  } else if (val == '2') {
    Data.pageQuery.columns = 'point'
    Data.pageQuery.orders = 'ASC'
  } else if (val == '3') {
    Data.pageQuery.columns = 'point'
    Data.pageQuery.orders = 'DESC'
  }
  init()
}
function sizeChangeHandle (val) {
  Data.pageQuery.pageSize = val
  init()
}
function currentChangeHandle (val) {
  Data.pageQuery.pageNum = val
  init()
}
onMounted(() => {
  init()
})
</script>

<style scoped>
.page-number {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
